<template>
<view class="status-header" :style="{height:titHeight+statusBar+2*titTop+'px'}">
  <view class="status-bar" :style="{height:statusBar+'px'}"></view>
  <view class="status-title flex-y" :style="{height:titHeight+'px',marginTop:titTop+'px'}">
    <slot></slot>
  </view>
</view>
</template>

<script>
const app = getApp();
export default {
  name: "Header",
  props: {
    title: {
      type: String,
      default: ""
    }      
  },
  /***
  微信小程序中 options 选项
  options:{
    multipleSlots: true, // 在组件定义时的选项中启动多slot支持，默认启用
    styleIsolation: "isolated", //  启动样式隔离。当使用页面自定义组件，希望父组件影响子组件样式时可能需要配置。具体配置选项参见：微信小程序自定义组件的样式
    addGlobalClass: true, //  表示页面样式将影响到自定义组件，但自定义组件中指定的样式不会影响页面。这个选项等价于设置 styleIsolation: apply-shared
    virtualHost: true, //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
  },
  ***/
  options:{
    virtualHost: true
  },
  data() {
    return {
      statusBar:0,
      titHeight:0,
      titTop:0
    };
  },
  created(){
    console.log('header--created')
    //uni.hideTabBar();
    this.layoutHeader()
  },
  methods: {
    layoutHeader(){
      this.statusBar = app.globalData.statusBar;
      this.titHeight = app.globalData.titHeight;
      this.titTop =  app.globalData.titTop;
    }
  }
}
</script>
<style>
.status-header{}
.status-bar{}
.status-title{align-items:center}
</style>